<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" class="demo-form-inline" size="small">
      <el-form-item label="CAS号">
        <el-input v-model="searchForm.casNo" placeholder="请输入CAS号"></el-input>
      </el-form-item>
      <el-form-item label="危化品名称">
        <el-input v-model="searchForm.name" placeholder="请输入危化品名称"></el-input>
      </el-form-item>
      <el-form-item label="英文名称">
        <el-input v-model="searchForm.englishName" placeholder="请输入英文名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-button type="primary" @click="handleEdit(tableData.length,{})" size="small">新增</el-button>
    <el-button type="danger" @click="piliangHandleDelete()" size="small">删除</el-button>
    <el-button type="warning" @click="handleExport" size="small">导出</el-button>

    <!-- 表格 -->
    <el-table class="mt-20" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="casNo" label="CAS号"></el-table-column>
      <el-table-column prop="name" label="危化品名称"></el-table-column>
      <el-table-column prop="englishName" label="英文名称" width="180"></el-table-column>
      <el-table-column prop="riskLevel" label="危险程度" width="180"></el-table-column>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" @click="handleEnterprise(scope.$index, scope.row)">企业</el-button>
          <el-button size="mini" @click="handleCase(scope.$index, scope.row)">案例</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
      <el-form :model="form" label-width="120px">
        <!-- 已有字段 -->
         <el-row :gutter="10">
             <el-col :span="12">
              <el-form-item label="CAS号">
                <el-input :disabled="isPreivew" v-model="form.casNo" placeholder="请输入CAS号"></el-input>
              </el-form-item>
             </el-col>
             <el-col :span="12">
              <el-form-item label="危化品名称">
                <el-input :disabled="isPreivew" v-model="form.name" placeholder="请输入危化品名称"></el-input>
              </el-form-item>
             </el-col>
         </el-row>
         <el-row :gutter="10">
             <el-col :span="12">
              <el-form-item label="英文名称">
                <el-input :disabled="isPreivew" v-model="form.englishName" placeholder="请输入英文名称"></el-input>
              </el-form-item>
             </el-col>
         </el-row>
        <!-- 新增字段 -->
        <el-form-item label="分子式">
          <el-input :disabled="isPreivew" type="textarea" v-model="form.molecularFormula" placeholder="请输入分子式"></el-input>
        </el-form-item>
        <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="分子量">
                <el-input :disabled="isPreivew" v-model="form.molecularWeight" placeholder="请输入分子量"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="熔点">
                <el-input :disabled="isPreivew" v-model="form.meltingPoint" placeholder="请输入熔点"></el-input>
              </el-form-item>              
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="密度">
                <el-input :disabled="isPreivew" v-model="form.density" placeholder="请输入密度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="外观性状">
                <el-input :disabled="isPreivew" v-model="form.appearance" placeholder="请输入外观性状"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
                <!-- 危险程度复选框 -->
        <el-form-item label="危险程度">
          <el-checkbox-group :disabled="isPreivew" v-model="form.riskLevel">
            <el-checkbox label="爆炸品">爆炸品</el-checkbox>
            <el-checkbox label="易燃气体">易燃气体</el-checkbox>
            <el-checkbox label="不燃气体">不燃气体</el-checkbox>
            <el-checkbox label="有毒气体">有毒气体</el-checkbox>
            <el-checkbox label="易燃液体">易燃液体</el-checkbox>
            <el-checkbox label="易燃固体">易燃固体</el-checkbox>
            <el-checkbox label="自燃物品">自燃物品</el-checkbox>
            <el-checkbox label="遇湿易燃物品">遇湿易燃物品</el-checkbox>
            <el-checkbox label="氧化剂">氧化剂</el-checkbox>
            <el-checkbox label="有机过氧化物">有机过氧化物</el-checkbox>
            <el-checkbox label="剧毒品">剧毒品</el-checkbox>
            <el-checkbox label="有毒品">有毒品</el-checkbox>
            <el-checkbox label="有害品（远离食品）">有害品（远离食品）</el-checkbox>
            <el-checkbox label="感染性物品">感染性物品</el-checkbox>
            <el-checkbox label="一级放射性物品">一级放射性物品</el-checkbox>
            <el-checkbox label="二级放射性物品">二级放射性物品</el-checkbox>
            <el-checkbox label="三级放射性物品">三级放射性物品</el-checkbox>
            <el-checkbox label="腐蚀品">腐蚀品</el-checkbox>
            <el-checkbox label="杂类">杂类</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="蒸汽压">
                <el-input :disabled="isPreivew" v-model="form.vaporPressure" placeholder="请输入蒸汽压"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="溶解性">
                <el-input :disabled="isPreivew" v-model="form.solubility" placeholder="请输入溶解性"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="稳定性">
                <el-input :disabled="isPreivew" v-model="form.stability" placeholder="请输入稳定性"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主要用途">
                <el-input :disabled="isPreivew" v-model="form.mainUse" placeholder="请输入主要用途"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="对环境的影响">
          <el-input type="textarea" :disabled="isPreivew" v-model="form.environmentalImpact" placeholder="请输入对环境的影响"></el-input>
        </el-form-item>
        <el-form-item label="对健康的危害">
          <el-input type="textarea" :disabled="isPreivew"  v-model="form.environmentalImpact1" placeholder="请输入对健康的危害"></el-input>
        </el-form-item>
        <el-form-item label="毒理学资料及环境行为">
          <el-input type="textarea" :disabled="isPreivew" v-model="form.environmentalImpact2" placeholder="请输入毒理学资料及环境行为"></el-input>
        </el-form-item>
        <el-form-item label="现场应急监测方法">
          <el-input type="textarea" :disabled="isPreivew" v-model="form.environmentalImpact4" placeholder="请输入现场应急监测方法"></el-input>
        </el-form-item>
        <el-form-item label="实验室监测方法">
          <el-input type="textarea" :disabled="isPreivew" v-model="form.environmentalImpact5" placeholder="请输入实验室监测方法"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!isPreivew" type="primary" @click="saveOrUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        casNo: '',
        name: '',
        englishName: ''
      },
      tableData: [
        {
          casNo: '99-89-8',
          name: '(对)异丙基苯酚',
          englishName: 'p-isopropylphenol',
          riskLevel: ''
        },
        {
          casNo: '45298-90-6',
          name: '1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,8-十七氟-1-辛烷磺酸',
          englishName: '',
          riskLevel: ''
        },
        {
          casNo: '367-11-3',
          name: '1,2-二氯苯',
          englishName: '1,2-Difluorobenzene',
          riskLevel: '易燃液体'
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 3,
      dialogVisible: false,
      dialogTitle : '添加危险化学品库',
      selectedData:[],
      isPreivew: false,
      editIndex: -1,
      form : {
        casNo: '',
        name: '',
        englishName: '',
        molecularFormula: '',
        molecularWeight: '',
        meltingPoint: '',
        density: '',
        appearance: '',
        vaporPressure: '',
        solubility: '',
        stability: '',
        mainUse: '',
        environmentalImpact: '',
        environmentalImpact1: '',
        environmentalImpact2: '',
        environmentalImpact3: '',
        environmentalImpact4: '',
        environmentalImpact5: '',
        riskLevel: []
      }
    };
  },
  methods: {
    onSearch() {
      // 搜索逻辑
    },
    getForm(){
      return {
        casNo: '',
        name: '',
        englishName: '',
        molecularFormula: '',
        molecularWeight: '',
        meltingPoint: '',
        density: '',
        appearance: '',
        vaporPressure: '',
        solubility: '',
        stability: '',
        mainUse: '',
        environmentalImpact: '',
        environmentalImpact1: '',
        environmentalImpact2: '',
        environmentalImpact3: '',
        environmentalImpact4: '',
        environmentalImpact5: '',
        riskLevel: []
      }
    },

    onReset() {
      // 重置逻辑
    },
    handleEdit(index, row) {
      this.isPreivew = false;
      let _form = this.getForm();
      this.form = {..._form,...row};
      this.editIndex = index;
      let isEdit = index < this.tableData.length;
      this.dialogTitle = isEdit ? '编辑危险化学品库' : '添加危险化学品库';
      this.dialogVisible = true;
      // 编辑逻辑
    },
    handleSelectionChange(val){
      this.selectedData = [...val];
    },
    handleDelete(index, row) {
      // 删除逻辑
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
      })
    },
    piliangHandleDelete(){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.selectedData.forEach(item => {
            let index = this.tableData.findIndex(it=> it.casNo == item.casNo);
            this.tableData.splice(index, 1);
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    handleExport() {
      // 导出逻辑
    },
    handleDetail(index, row) {
      this.isPreivew = true;
      let _form = this.getForm();
      this.form = {..._form,...row};
      this.dialogVisible = true;
      // 详情逻辑
    },
    handleEnterprise(index, row) {
      // 企业逻辑
    },
    handleCase(index, row) {
      // 案例逻辑
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      // 分页大小改变逻辑
    },
    handleCurrentChange(val) {
      this.currentChange = val;
      // 当前页码改变逻辑
    },
    saveOrUpdate() {
      this.dialogVisible = false;
      // 添加新数据到表格
        let isEdit = this.editIndex < this.tableData.length;
        let row = {...this.form}
        this.tableData.splice(this.editIndex, 1, row);
        // 显示成功消息
        this.$message({
            message:isEdit ?'修改成功': '新增成功',
            type: 'success'
        });
      // 保存或更新逻辑
    }
  }
};
</script>